import React,{Component} from 'react'
import Pages from '../Pages'
// import CourseBig from '../CourseBig'
import CourseSmall from '../CourseSmall'
import {Spin,message} from 'antd'
import * as pub from '../../config/public'
import * as fetch from '../../config/fetch'
class LearnCenter extends Component {			
	constructor(props) {
		super(props);
		this.state = {
			courseType :this.props.params.code?this.props.params.code:'',
			courseName: '',
			checkState:'',
			jumpPage:1,
			loading:false,
			totalPage:1,
			elecReqCourse:1,
			courseList:[],
			categoriesList:[],
			changePage:1
		}
	}
	show(){
		pub.loading(this,true);
		fetch.getCourse(this.state.jumpPage,this.state.checkState,this.state.courseType,this.state.courseName,this.state.elecReqCourse).then((data)=>{
			if (data.result === 'RC100') {
				this.setState({
					courseList: data.coursePage.pageItems?data.coursePage.pageItems:[],
					totalPage: data.coursePage.totalPage,
					categoriesList:data.categoriesList.categoriesList
				})
			} else {
				this.setState({
					courseList: [],
					totalPage: 1,
					categoriesList:[]
				})
				message.error(data.errMsg, 3);
			}
			pub.loading(this,false);
		}, (res) => {
			pub.loading(this,false);
			pub.reject(res);
		})
	}
	jump(page){
		this.setState({
			changePage:page,
			jumpPage:page
		},()=>{
			this.show();
		})
	}
	componentWillMount() {
		this.show();
	}
	changeTab(tab) {
		this.setState({
			elecReqCourse: tab,
			jumpPage:1,
			changePage:1
		},()=>{
			this.show()
		});
	}
	refreshCourse(){
		this.show();
	}
	render(){
		return(
		<div className="wrapper bg-F0F4F6">
			     <div className="layout clearFix pad-t-20">
			 
			       	 <div className="filter clearFix mar-b-20">
				        <ul className="filter-ul clearFix">
							<li><a className={this.state.elecReqCourse === 1?"active":""} onClick={()=>this.changeTab(1)}>必修课程</a></li>
				            <li><a className={this.state.elecReqCourse === 0?"active":""} onClick={()=>this.changeTab(0)}>选修课程</a></li>
				        </ul>

					     <div className="filter-search floatR">
					     	<input type="text" value={this.state.courseName} onChange={(e)=>{this.setState({courseName:e.target.value})}} placeholder="搜索"/>
					     	<a className="btn search-btn" onClick={()=>this.show()} ><i className="icon-search"></i></a>
					     </div>
					     <div className="filter-select floatR">
					     	<select value={this.state.courseType} onChange={(e)=>{this.setState({courseType:e.target.value},()=>{this.show();})}}>
					     	   <option value=''>全部分类</option>
					     	   {this.state.categoriesList.map((item,index)=>{
					     	   	return(
					     	   		<option key={index} value={item.code}>{item.name}</option>
					     	   		)
					     	   })}
					     	</select>
					     </div>

			          </div>
			      <Spin spinning={this.state.loading} tip="加载列表中...">
			         <div className="courses clearFix" style={{minHeight:'558px'}}>
			         {this.state.courseList.map((item,index)=>{
			         	return(
			         		<CourseSmall show={this.show.bind(this)} userCourseOperation={item.userCourseOperation} id={item.courseId} refreshCourse={this.refreshCourse.bind(this)} course={item} key={index}/>
			         		)
			         })}
			         </div>
			      </Spin>
		          <div className="line"></div>
			      <Pages totalPage={this.state.totalPage} changePage={this.state.changePage} jump={this.jump.bind(this)} />
			     </div>

	   </div>

			)
	}
}
export default LearnCenter;

